<template>
	<view class="container">
		<tn-nav-bar :isBack="true"  backgroundColor="#4169E1" class="tatils">国产铝A00【佛山】</tn-nav-bar>
		<!-- <view style="background: linear-gradient(to top right, #007CEC, #00BEE8);">
			<view style="text-align: center;color: #fff;font-size: 18px;padding-top: 60px;padding-bottom: 10px;">贵金属</view>
		</view> -->
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view  style="background: linear-gradient(to top right, #007CEC, #00BEE8);padding: 10px;">
				<!-- <view style="color: #fff;text-align: right;font-size: 16px;height: 30px;line-height: 30px;">历史报价<text style="font-size: 18px;" class="tn-icon-calendar"></text></view> -->
				<view  style="height: 40px;margin-top: 10px;overflow: hidden;">
					<view style="width:40%;float: left;color: #fff;font-size: 18px;font-weight: 900;">19000-19100</view>
					<view style="width:60%;float: left;color: #fff;text-align: right;font-size: 22px;">+加自选</view>
				</view>
				<view>
					<view v-for="(item,index) in 3" :key="index" style="overflow: hidden;margin-top: 5px;">
						<view style="float: left;width: 33%;text-align: center;color: #fff;">涨跌值 +100</view>
						<view style="float: left;width: 33%;text-align: center;color: #fff;">涨跌幅 +0.53%</view>
						<view style="float: left;width: 33%;text-align: center;color: #fff;">2024/07/02发布</view>
					</view>
				</view>
			</view>
				<ectb ref="echarts" :option="option" canvasId="echarts"></ectb>
			<!-- <view style="height: 40px;margin-top: 10px;overflow: hidden;">
				<view style="width:90%;float: left;">
					<tn-tabs :list="list" :current="current" activeColor="#1678FF" :barWidth="50" @change="change"></tn-tabs>
				</view>
				<view style="text-align: center;line-height: 40px;">
					<text @click="dzshow = true" style="font-size: 23px;" class="tn-icon-menu-circle"></text>
				</view>
			</view> -->
		<!-- 	<view style="width: 90%;margin: 0 auto;margin-top: 10px;box-shadow: 5px 5px 5px 5px rgba(225, 225, 225, 0.5);height: 40px;">
				<input  style="height: 40px;width: 100%;line-height: 40px;font-size: 28rpx;padding-left: 3px;"
				type="text" name="" placeholder="请输入关键词进行搜索" @confirm="getsearch"
					v-model="jname.searchValue">
			</view> -->
		<!-- 	<view style="padding: 10px;overflow: hidden;">
				<view v-for="(item,index) in clist[0]" :key="index" style="background-color: #e5e5e5;float: left;margin-top: 5px;margin-left: 5px;width: 30%;text-align: center;height: 30px;line-height: 30px;">
					<text>{{item.name}}</text>
				</view>
			</view> -->
			<view>
				<view style="height: 40px;overflow: hidden;background-color: #dedede;">
					<view style="width: 40%;float: left;height: 40px;line-height: 40px;font-weight: 600;text-align: center;">名称/区间</view>
					<view style="width: 30%;float: left;height: 40px;line-height: 40px;font-weight: 600;text-align: center;">日期/均价</view>
					<view style="width: 30%;float: left;height: 40px;line-height: 40px;font-weight: 600;text-align: center;">涨跌</view>
				</view>
				<view v-for="(item,index) in lists"  :key="index" style="height: 60px;overflow: hidden;margin-top: 15px;border-bottom: 1px solid #d8d8d8;padding-bottom: 10px;">
					<view  style="width: 40%;float: left;height: 53px;line-height: 24px;">
						<view style="text-align: center;font-weight: 600;">1#光亮铜</view>
						<view style="text-align: center;color:#ff0000;margin-top: 3px;">72000-72200元/吨</view>
					</view>
					<view style="width: 30%;float: left;height: 53px;line-height: 24px;">
						<view  style="text-align: center;font-weight: 600;">07月02日</view>
						<view  style="text-align: center;color:#ff0000;margin-top: 3px;">72100</view>
					</view>
					<view style="width: 30%;float: left;height: 53px;">
						<view style="text-align: center;font-weight: 600;background-color: #ff0000;
						color: #fff;border-radius: 5px;height: 20px;width: 60px;line-height: 20px;margin: 10px auto;">+400</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		
		<tn-popup v-model="dzshow" mode="right" width="600rpx">
			<nyn :hot="true" @bindCity="bindCity"></nyn>
		</tn-popup>
		
	</view>
</template>
<script>	
	import ectb from '@/components/echarts-uniapp/echarts-uniapp.vue'
	import nyn from '@/components/nyn-city-list/nyn-city-list.vue'
	import {
		getcList,
		getbannar,
		gethylist,
		getzblist
	} from '@/apis/index.js'
	export default {
		components: {
			nyn,
			ectb
		},
		data() {
			return {
				option: {},
				dzshow:false,
				jname:{
					name1:'全国',
					searchValue:''
				},
				current:0,
				list: [{
					name: '全国'
				}, {
					name: '上海'
				}, {
					name: '山东'
				}],
				clist:[],
				name:'',
				id:'',
				lists:[
					{name1:'',NamedNodeMap:1},
					{name1:'',NamedNodeMap:1},
					{name1:'',NamedNodeMap:1},
					{name1:'',NamedNodeMap:1},
					{name1:'',NamedNodeMap:1}
				]
			};
		},
		onReady(){
			this.getoption()
		},
		onLoad(opent) {
			this.name = opent.name
			this.id = opent.id
			this.getcLists()
		},
		methods:{
			getoption(){
				this.option = {
				  title: {
					  text: '日线'
					},
					xAxis: {
					  type: 'category', // x轴类型为类目轴
					  boundaryGap: false, // 取消x轴两端空白
					  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // x轴类目数据
					},
				   yAxis: {
					  type: 'value' // y轴类型为数值轴
					},
					series: [{
					  type: 'line', // 图表类型为折线图
					  data: [120, 180, 150, 80, 70, 110, 130] // 折线图数据
					}]
				};
			},
			bindCity(event) {
				this.list[0].name =  event.name
				this.dzshow = false
			},
			// 分类列表
			getcLists() {
				getcList().then(res => {
					if (res.code == 200) {
						this.clist = res.data
					}
				}).catch(error => {
					that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},
			getsearch(){
				
			},
			addshop(){
				
			},
			change(e){
				this.current = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tatils{
		color: #ffffff;
	}
	.container{
		background-color: #ffffff;
	}
</style>
